<template> <!-- @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" -->
  <div class="tool-wrap">
    <div class="cont">
      <div class="item" @click="click(1)">
        <el-image style="width: 40px;" fit="fit" :src="require('@/assets/img/bnw.png')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <span>宝能网盘</span>
      </div>
      <div class="item hove">
        <el-image style="width: 50px;" fit="fit" :src="require('@/assets/img/xcx.png')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <span>小程序</span>
        <div class="img">
          <el-image fit="fit" :src="require('@/assets/img/xcxewm.jpg')" />
          <span>微信扫描二维码移动端报表</span>
        </div>
      </div>
      <div class="item" @click="click(2)">
        <el-image style="width: 40px;" fit="fit" :src="require('@/assets/img/dsj.png')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <span>大数据平台</span>
      </div>
      <div class="item" @click="click(3)">
        <el-image style="width: 40px;" fit="fit" :src="require('@/assets/img/czsp.png')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <span>操作视频</span>
      </div>
      <div class="item" @click="click(4)">
        <el-image style="width: 40px;" fit="fit" :src="require('@/assets/img/jkbb.png')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <span>健康度报表</span>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  props: {},
  data () {
    return {

    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  // 方法集合
  methods: {
    click(n) {
      const reg = /(?:http(s)?:\/\/)(.*?\.)?/;
      const path = location.href.match(reg)[2] === 'secp.';
      switch (n) {
        case 1:
          window.open('http://sit-pan.bngrp.com/');
          break;
        case 2:
          window.open(path ? 'http://dvs.bngrp.com/decision/login?origin=3ebc7470-991d-412f-adfe-d6f925f14294' : 'http://10.58.189.50/');
          break;
        case 3:
          window.open('http://i.youku.com/i/UNDE2MTAyNjI2OA==/videos');
          break;
        case 4:
          window.open('http://10.58.189.50/');
          break;
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.tool-wrap{
  position: fixed;
  top:calc(100% - 388px);
  left: calc(100% - 22px);
  z-index: 12;
  transition:  left 1.5s;
  border-right: 50px solid transparent;
  &:hover{
  left: calc(100% - 107px);
  }
  .cont{
    width: 65px;
    height: 350px;
    cursor: pointer;
    .item{
      position: relative;
      display: flex;
      height: 70px;
      justify-content: center;
      align-items: center;
      flex-direction:column;
      background: transparent;
      // border: 0.5px solid #ededed;
      margin: 2px 0;
      // box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      transition: 0.5s;
      &::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &:hover {
        color: #95a5a6;
      }

      &:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }
      &.hove{
        position: relative;
        .img{
          display: none;
          height: 211px;
          width: 238px;
          position: absolute;
          left: -250px;
          text-align: center;
        }
      }
      &.hove:hover{
        .img{
          display: block;
        }
      }
      & span{
        font-size: 10px;
      }
    }
  }
}
</style>
